<template>
  <div>
    <div id="help">
      <div class="helpBgc">
        <h2>{{h2Text.text}}</h2>
      </div>
      <!--内容页-->
      <div class="mainContent">
        <div class="rightNav">
          <p :class="{right:one.isRight}" @click="problem">常见问题</p>
          <p :class="{right:two.isRight}" @click="course">使用教程</p>
        </div>
        <!--常见问题-->
        <div class="leftText" v-show="display.on">
          <ul>
            <li v-for="item in items">
              <div @click="hiddenBlock(item)">
              <span>
                <img :src="item.imgSrc1">
              </span>
                <p>{{item.text1}}</p>
              </div>
              <!--动画显示-->
              <transition  name="fade">
                <div v-if="item.show1" class="hiddenContent" >{{item.answer}}</div>
              </transition>
            </li>
          </ul>
        </div>
        <!--使用教程-->
        <div class="leftText-content" v-show="display.ok" >
          <!--选项卡-->
          <div class="leftText1  clearFix">
            <div class="list-nav clearFix" >
              <ul>
                <li @click="listOne(listNav)" :class="{listColor:listNav.isListColor}" v-for="listNav in listNavs">{{listNav.text}}</li>
              </ul>
            </div>
          </div>
          <div class="right-content">
            <div v-for="show in listNavs" v-show="show.ok">
              <p v-for="list in show.listone">{{list.text}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--页脚组件-->
    <div class="footer">
      <footer-one></footer-one>
    </div>

  </div>
</template>
<script>
  //引入组件
  import HeaderOne from '../components/firmware/header'
  import FooterOne from '../components/firmware/footer.vue'
  import HelpBgc from  '../assets/bg_background.png'//背景图片
  import imgrou from  '../assets/rou.png' //向上
  import imgrou1 from  '../assets/rou1.png'//向下箭头
  export default {
      name:'Help',
      data(){
          return{
              display:{
                  on:true,
                  ok:false
              },
              h2Text:{
                 text:'常见问题'
              },
              one:{
                   isRight:true
              },
              two:{
                  isRight:false
              },
              items:[
                {
                  imgSrc1:imgrou1,
                  show1:false,
                  text1:'高级版和企业版套餐在速度、带宽及路线上有差别吗？',
                  answer:'穿云箭的任何套餐在速度和带宽上都没有任何限制',
                  isDisplay:true
                },
                {
                  imgSrc1:imgrou1,
                  show1:false,
                  text1:'穿云令是什么如何使用？',
                  answer:'穿云箭的任何套餐在速度和带宽上都没有任何限制',
                  isDisplay:true
                },
                {
                  imgSrc1:imgrou1,
                  show1:false,
                  text1:'账户中已有VPN账户，再使用兑换码，原套餐会怎么样？',
                  answer:'穿云箭的任何套餐在速度和带宽上都没有任何限制',
                  isDisplay:true
                }
              ],
            listNavs:[
              {
                text:'windows',
                isListColor:true,
                ok:true,
                listone:[
                  {
                      text:'1.windows穿云箭下载'
                  },
                  {
                    text:'2.windows穿云箭安装'
                  },
                  {
                    text:'3.windows穿云箭完成'
                  }
                ]
              },
              {
                text:'Mac',
                isListColor:false,
                ok:false,
                listone:[
                  {
                    text:'1.Mac穿云箭下载'
                  },
                  {
                    text:'2.Mac穿云箭安装'
                  },
                  {
                    text:'3.Mac穿云箭完成'
                  }
                ]
              },
              {
                text:'Linux',
                isListColor:false,
                ok:false,
                listone:[
                  {
                    text:'1.Linux穿云箭下载'
                  },
                  {
                    text:'2.Linux穿云箭安装'
                  },
                  {
                    text:'3.Linux穿云箭完成'
                  }
                ]
              },
              {
                text:'iphone',
                isListColor:false,
                ok:false,
                listone:[
                  {
                    text:'1.iphone穿云箭下载'
                  },
                  {
                    text:'2.iphone穿云箭安装'
                  },
                  {
                    text:'3.iphone穿云箭完成'
                  }
                ]
              },
              {
                text:'Android',
                isListColor:false,
                ok:false,
                listone:[
                  {
                    text:'1.Android穿云箭下载'
                  },
                  {
                    text:'2.Android穿云箭安装'
                  },
                  {
                    text:'3.Android穿云箭完成'
                  }
                ]
              }
            ],
            screenHeight: window.screen.height-150,
          }
      },
    //注册组件
    components:{HeaderOne,FooterOne},
     mounted (){
       //设置模块高度
       document.getElementById('help').style.height=this.screenHeight+"px";//页面初始化
       //重新加载页面的显示
       this.h2Text.text = JSON.parse(sessionStorage.getItem("title"));
       this.one.isRight = JSON.parse(sessionStorage.getItem("sidebar1"));
       this.two.isRight = JSON.parse(sessionStorage.getItem("sidebar2"));
       this.display.on = JSON.parse(sessionStorage.getItem('sidebar1Text'));
       this.display.ok = JSON.parse(sessionStorage.getItem('sidebar2Text'));
     },
     methods:{
       //常见问题
       problem:function () {
           console.log(123)
         var _self = this;
         //显示隐藏子菜单
         _self.$set(_self.display,'on',true);
         _self.$set(_self.display,'ok',false);
         //显示选项卡样式
         _self.$set(_self.one,'isRight',true);
         _self.$set(_self.two,'isRight',false);
         _self.$set(_self.h2Text,'text','常见问题');
       },
       //使用教程
       course:function () {
         console.log(456)
         var _self = this;
         _self.$set(_self.display,'on',false);
         _self.$set(_self.display,'ok',true);
         //显示选项卡样式
         _self.$set(_self.one,'isRight',false);
         _self.$set(_self.two,'isRight',true);
         _self.$set(_self.h2Text,'text','使用教程');
       },
       //显示隐藏
       hiddenBlock:function (item) {
           console.log(item);
         var _self = this;
         _self.items.forEach(function (el) {
           if(el == item){
             el.show1 = !el.show1;
             //控制内容的隐藏与显示
             if(el.show1 == true){
                 //向上箭头
               el.imgSrc1 = imgrou
             }else if(el.show1 == false) {
                 //向下箭头
                 el.imgSrc1 = imgrou1
             }
           }else {
             el.show1 = false;
             el.imgSrc1 = imgrou1
           }
         });
       },
       listOne:function (listNav) {
         var _self = this;
         _self.listNavs.forEach(function (el) {
           if(el == listNav ){
             el.isListColor = true;
             el.ok = true;

           }else {
               el.isListColor = false;
               el.ok = false;
           }
         })
       }
     },
    watch: {
      screenHeight (val) {
        this.screenHeight = val
        document.getElementById('help').style.height = this.screenHeight -150 + "px";//检测窗口的大小，并赋值
      },
      'h2Text.text':function (newtext){
        if(newtext == null) {
          this.$set(this.h2Text, 'text', '常见问题');
        }else {
          sessionStorage.setItem("title", JSON.stringify(newtext));
        }
      },
      //右侧导航选中样式
      'one.isRight':function (newOne) {
        if(newOne == null) {
          this.$set(this.one, 'isRight', true);
          this.$set(this.two, 'isRight', false);
        }else {
          sessionStorage.setItem("sidebar1", JSON.stringify(newOne));
        }
      },
      'two.isRight':function (newTwo) {
        sessionStorage.setItem("sidebar2", JSON.stringify(newTwo));
      },
      //右侧内容显示
      'display.on':function (newDisplay) {
          console.log(newDisplay)
          if(newDisplay == null){
//              console.log(88888888888)
              this.$set(this.display,'on',true);
              this.$set(this.display,'ok',false);
          }else {
            sessionStorage.setItem("sidebar1Text", JSON.stringify(newDisplay));
          }


      },
      'display.ok':function (newDisplay1) {
        console.log(newDisplay1)
        sessionStorage.setItem("sidebar2Text", JSON.stringify(newDisplay1));
      }
    }
  }
</script>
<style scoped>
  *{ /*注意*/
    margin: 0;
    padding:  0;
  }
  .fade-enter-active {
    transition: opacity 1.5s
  }
  .fade-leave-active{
    transition: opacity 0.5s
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }
  #help{
    width: 100%;
    margin: auto;
  }
  .listColor{
    color:#FF7A3F;
  }
  .helpBgc{
    background: url("../assets/bg_background.png") no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    display: table;
    height: 20%;
    margin: auto;
    width: 100%;
  }
  h2{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 2.0rem;
    font-weight: 100;
    letter-spacing:2px;
  }
  .mainContent{
    margin: 50px auto 0;
    height: 80%;
  }
  .right{
    background-color: #FFF0E9;
    color: #FF7A3F;
    border-left: 2px solid #FF7A3F;
  }
  .right1{
    background-color: #FFF0E9;
    color: #FF7A3F;
    border-left: 2px solid #FF7A3F;
  }
  .display{
    display: none;
  }
  .rightNav{
    display: inline-block;
    vertical-align: top;
    width: 10%;
    margin-right: 50px;
  }
  .rightNav p{
    padding: 8px 10px;
    margin: 0 0 15px 0;
  }
  .rightNav p:hover{
    background-color: #FFF0E9;
    cursor: pointer;
  }
  .leftText{
    display: inline-block;
    width: 60%;
    text-align: left;
  }
  .leftText span{
    height: 25px;
    width: 25px;
    display: inline-block;
    vertical-align: middle;
  }
  .leftText ul li div{
    padding: 15px 0;
  }
  .leftText div p{
    display: inline-block;
    font-size: 1.1rem;
    margin: 0;
  }
  .leftText span img{
    height: 25px;
    width: 25px;
    display: block;
  }
  .leftText ul{
    list-style: none;
  }
  .hiddenContent{
    /*padding-left: 38px;*/
    margin-left: 30px;
  }
  /*使用教程*/
  .leftText-content{
    display: inline-block;
    width: 60%;
  }
  .leftText1{
    /*width: 80%;*/
    padding: 0 0 20px 0;
    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  }
  .leftText1 ul{
    list-style: none;
    width: 100%;
  }
  .leftText1 ul li{
    display: inline-block;
    padding:  0 50px 0 0;
    width: 12%;
    float: left;
    text-align: left;
  }
  .leftText1 ul li:hover{
    cursor: pointer;
  }
  .list-nav{
    margin: 0;
    width: 100%;
    text-align: left;
  }
  /*列表显示内容*/
  .right-content{
    padding: 20px 0 0 70px;
    text-align: left;
  }
  /*清除浮动*/
  .clearFix:after{
    content: '';
    clear: both;
    display: block;
  }
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom:0;
    min-width: 1200px;
  }
</style>
